<template>
  <div id="user">
    <div class="back">
      <div class="back-content" @click="$router.back()">
        <a-icon type="left" />
        <span>返回</span>
      </div>
    </div>

    <div class="user-wrap">
      <a-row>
        <a-col :span="span">
          <a-card title="我的信息" style="margin-right: 10px">
            <div class="upload-avatar">
              <a-avatar :src="form.avatar" shape="square" :size="64" icon="user" />

              <a-upload
                name="file"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="/api/upload/image"
                :before-upload="beforeUpload"
                @change="handleChange"
                :data="{ folder: 'avatar' }"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                </div>
              </a-upload>
            </div>
          </a-card>

          <a-card class="user-type" title="类型" style="margin-right: 10px">
            <div class="upload-avatar">
              <a-form-model :model="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-form-model-item label="类型：">
                  <a-input v-model="form.type.name" placeholder="大舰长 名称" style="width: 49%" />
                  <a-input v-model="form.type.master" placeholder="负责Web,Android,小程序" style="width: 49%; margin-left: 5px" />
                </a-form-model-item>
                <a-form-model-item label="经验：">
                  <a-input v-model="form.duration.type" placeholder="Android, 前端, 小程序..." style="width: 49%" />
                  <a-input-number v-model="form.duration.time" :min="0" :max="30" /> 年
                </a-form-model-item>
              </a-form-model>
            </div>
          </a-card>
        </a-col>
        <a-col :span="span">
          <a-card title="我的信息">
            <a slot="extra" href="#" @click="setUser">更新</a>
            <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
              <a-form-model-item label="姓名：">
                <a-input v-model="form.name" />
              </a-form-model-item>
              <a-form-model-item label="年龄：">
                <a-input v-model="form.age" />
              </a-form-model-item>
              <a-form-model-item label="邮箱：">
                <a-input v-model="form.email" />
              </a-form-model-item>
              <a-form-model-item label="性别：">
                <a-input v-model="form.sex" />
              </a-form-model-item>
              <a-form-model-item label="学历：">
                <a-input v-model="form.education" />
              </a-form-model-item>
              <a-form-model-item label="毕业院校：">
                <a-input v-model="form.graduatedSchool" />
              </a-form-model-item>
            </a-form-model>
          </a-card>
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px">
        <a-col :span="span * 2">
          <a-card title="个人经历：">
            <a-textarea v-model="form.selfIntro" :rows="10" />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      imageUrl: '',
      span: 6, //左右两边的span
      form: {
        name: '',
        age: '',
        email: '',
        sex: '',
        education: '',
        graduatedSchool: '',
        selfIntro: '',
        type: {
          name: '',
          master: ''
        },
        duration: {
          type: '',
          time: ''
        }
      }
    }
  },

  created() {
    this.getUser()
  },

  mounted() {
    window.addEventListener('resize', this.setSpan)
  },

  destroyed() {
    window.removeEventListener('resize', this.setSpan)
  },

  methods: {
    getUser() {
      this.$api.user().then((res) => {
        if (res.code === 1) {
          let { age, avatar, education, email, grad_school, name, sex, self_intro, type, duration } = res.data
          this.form.name = name
          this.form.age = age
          this.form.email = email
          this.form.sex = sex
          this.form.education = education
          this.form.graduatedSchool = grad_school
          this.form.avatar = avatar
          this.form.selfIntro = self_intro
          this.form.type = type || {
            name: '',
            master: ''
          }
          this.form.duration = duration || {
            type: '',
            time: ''
          }
        }
      })
    },

    setUser() {
      this.$api
        .setUser({
          name: this.form.name,
          age: this.form.age,
          email: this.form.email,
          sex: this.form.sex,
          education: this.form.education,
          grad_school: this.form.graduatedSchool,
          avatar: this.form.avatar,
          self_intro: this.form.selfIntro,
          type: JSON.stringify(this.form.type),
          duration: JSON.stringify(this.form.duration)
        })
        .then((res) => {
          if (res.code === 1) {
            this.getUser()
            this.$message.success(res.message)
          }
        })
    },

    // 设置span
    setSpan() {
      if (document.body.clientWidth < 1600) {
        this.span = 12
      } else {
        this.span = 6
      }
    },

    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.loading = false
        this.form.avatar = info.file.response.data
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    // 上传图片限制
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg, jpeg, png')
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传最大文件限制5MB!')
      }
      return isJpgOrPng && isLt5M
    }
  }
}
</script>
<style lang="less" scoped>
#user {
  .user-wrap {
    .upload-avatar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .avatar-uploader {
      width: auto;
    }

    .user-type {
      margin-top: 30px;
    }
  }
}
</style>